<template>
  <div v-loading="loading">
    <!-- v-if="canEdit" -->
    <div style="display: flex; justify-content: flex-end; padding-right: 20px">
      <el-button type="primary" size="mini" @click="handleAdd"> 退款申请 </el-button>
    </div>
    <div v-empty="list.length === 0">
      <div class="log-items">
        <examine-cell
          v-for="(item, index) in list"
          :key="index"
          :data="item.dataInfo"
          :canEdit="canEdit"
          @on-handle="examineCellHandle"
        />
        <div class="load">
          <el-button type="text" :loading="loadMoreLoading">
            {{ loadMoreLoading ? "加载更多" : "没有更多了" }}
          </el-button>
        </div>
      </div>
    </div>
    <examine-handle
      :show="showExamineHandle"
      @close="showExamineHandle = false"
      @save="refreshList"
      :id="rowID"
      examineType="oa_examine"
      status="2"
    />
    <examine-create-view
      v-if="isCreate"
      :category_id="createInfo.category_id"
      :category_title="createInfo.title"
      :action="createAction"
      @save-success="refreshList"
      @hiden-view="isCreate = false"
    />
    <c-r-m-full-screen-detail
      :visible.sync="showFullDetail"
      :crmType="detailCRMType"
      :id="rowID"
    />
    <Print-refund-dialog v-model="showPrintHandle" :row-id="rowID" @on-close="onClosePrint" />
  </div>
</template>

<script>
import ExamineCell from "@/views/OAManagement/examine/components/examineCell"; // 跟进记录
import ExamineCreateView from "@/views/OAManagement/examine/components/examineCreateView";
import PrintRefundDialog from "@/views/customermanagement/contract/components/PrintRefundDialog"; // 打印退款单
import { crmRecordIndex } from "@/api/customermanagement/common";
import { oaExamineDelete } from "@/api/oamanagement/examine";

export default {
  /** 审批 跟进记录*/
  name: "examine-log",
  components: {
    ExamineCell,
    CRMFullScreenDetail: () =>
      import("@/views/customermanagement/components/CRMFullScreenDetail.vue"),
    ExamineHandle: () => import("@/components/Examine/ExamineHandle"),
    ExamineCreateView,
    PrintRefundDialog,
  },
  props: {
    /** 模块ID */
    id: [String, Number],
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: "",
    },
    /** 是公海 默认是客户 */
    isSeas: {
      type: Boolean,
      default: false,
    },
    // 刷新
    refresh: {
      type: [String, Number, Boolean],
      default: 0,
    },
    // 是否可编辑
    canEdit: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    id(val) {
      this.refreshList();
    },
    refresh(v) {
      this.refreshList();
    },
  },
  data() {
    return {
      loading: false,
      loadMoreLoading: true,
      isPost: false,
      page: 1,
      list: [], // 跟进记录列表
      rowID: "", // 行信息
      // 撤回操作
      showExamineHandle: false,
      showPrintHandle: false, // 打印操作
      isCreate: false, //是编辑
      createAction: { type: "save" },
      createInfo: {}, // 编辑所需要的id 标题名信息
      // 详情
      showFullDetail: false,
      detailCRMType: "",
    };
  },
  mounted() {
    // 分批次加载
    let self = this;
    let item = document.getElementById("follow-log-content");
    item.onscroll = function () {
      let scrollTop = item.scrollTop;
      let windowHeight = item.clientHeight;
      let scrollHeight = item.scrollHeight; //滚动条到底部的条件

      if (scrollTop + windowHeight == scrollHeight && self.loadMoreLoading == true) {
        if (!self.isPost) {
          self.isPost = true;
          self.page++;
          self.getList();
        } else {
          self.loadMoreLoading = false;
        }
      }
    };

    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      crmRecordIndex({
        page: this.page,
        limit: 10,
        types: "crm_" + this.crmType,
        types_id: this.id,
        category_id: 12,
        by: "examine", // 类型（record 跟进记录，log 日志、examine审批、task 任务、event日程、默认是全部）
      })
        .then((res) => {
          this.list = this.list.concat(res.data.list);
          if (res.data.list.length < 10) {
            this.loadMoreLoading = false;
          } else {
            this.loadMoreLoading = true;
          }
          this.loading = false;
          this.isPost = false;
        })
        .catch(() => {
          this.isPost = false;
          this.loading = false;
        });
    },
    handleAdd() {
      this.$emit("openForm", {
        category_id: 12,
        title: "退款申请",
      });
    },
    refreshList() {
      this.page = 1;
      this.list = [];
      this.getList();
    },
    // 关闭打印弹窗
    onClosePrint() {
      this.rowID = "";
      this.showPrintHandle = false;
    },
    examineCellHandle(data) {
      // 编辑
      if (data.type == "edit") {
        data.data.item.title = data.data.item.category_name;
        this.createInfo = data.data.item;
        this.createAction = {
          type: "update",
          id: data.data.item.examine_id,
          data: data.data.item,
        };
        this.isCreate = true;
        // 删除
      } else if (data.type == "delete") {
        this.$confirm("确定删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            oaExamineDelete({
              id: data.data.item.examine_id,
            }).then((res) => {
              this.refreshList();
              this.$message.success("删除成功!");
            });
          })
          .catch(() => {});
        // 撤回
      } else if (data.type == "withdraw") {
        this.rowID = data.data.item.examine_id;
        this.showExamineHandle = true;
        // 详情
      } else if (data.type == "view") {
        this.detailCRMType = "examine";
        this.rowID = data.data.item.examine_id;
        this.showFullDetail = true;
        // 打印
      } else if (data.type == "print") {
        this.rowID = data.data.item.examine_id;
        this.showPrintHandle = true;
      } else if (data.type == "related-detail") {
        this.rowID = data.data.item[data.data.type + "_id"];
        this.detailCRMType = data.data.type;
        this.showFullDetail = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.log-items {
  min-height: 400px;
  position: relative;
  padding: 10px 20px;
}

.load {
  color: #999;
  font-size: 13px;
  margin: 0 auto 15px;
  text-align: center;
  .el-button,
  .el-button:focus {
    color: #ccc;
    cursor: auto;
  }
}
</style>
